<template>
  <div class="page-header-index-wide">
    <a-row :gutter="24">
      <a-col :sm="24" :md="12" :xl="12" :style="{ marginBottom: '24px' }">
        <a-card>
          <div slot="title">
            {{ $t('viewsindex.hysf') }}  ({{ $t('viewsindex.dqkyye') }}: <b style="color:red;">{{user.money}}</b>)
          </div>
          <div class="table-operator">
          </div>
          <div>
            <a-form :form="form">
              <a-form-item
                :label-col="formItemLayout.labelCol"
                :wrapper-col="formItemLayout.wrapperCol"
                :label="this.$t('viewsindex.hyzh')"
              >
                <a-input-search v-decorator="[
                    'username',
                    { rules: [{ required: true, message: '{{ $t(\'viewsindex.qsrhyzh\') }}' }] },
                  ]" :placeholder="this.$t('viewsindex.hyzh')" style="width: 200px" @search="onSearch" />
                <span v-if="mInfo">{{ $t('viewsindex.dqdj') }}: {{mInfo}}</span>
              </a-form-item>
              <a-form-item
                :label-col="formItemLayout.labelCol"
                :wrapper-col="formItemLayout.wrapperCol"
                :label="this.$t('viewsindex.hylx')"
              >
                <a-radio-group v-model="level" button-style="solid">
                  <a-radio-button :value="card.level" v-for="card in vipcard" >
                    {{card.name}}
                  </a-radio-button>
                  
                </a-radio-group>
              </a-form-item>
              <a-form-item :label-col="formTailLayout.labelCol" :wrapper-col="formTailLayout.wrapperCol">
                <a-button :loading="loading" type="primary"  @click="handleClickSubmit">
                  {{ $t('viewsindex.tj') }}
                </a-button>
              </a-form-item>
            </a-form>
          </div>
        </a-card>

        <a-card style="margin-top:25px;">
          <div slot="title">
            {{ $t('viewsindex.zhczzx') }}10{{ $t('viewsindex.tjl') }}
          </div>
          <div class="table-operator">
          </div>
          <div>
            <a-table
              :columns="columns"
              :dataSource="data2"
              :pagination="false"
              :loading="loading"
            >
            </a-table>
          </div>
        </a-card>
      </a-col>
      <a-col :sm="24" :md="12" :xl="12" :style="{ marginBottom: '24px' }">
        <a-card>
          <div slot="title">
            {{ $t('viewsindex.hyczzx') }}10{{ $t('viewsindex.tjl') }}
          </div>
          <div class="table-operator">
          </div>
          <div>
            <a-table
              :columns="columns2"
              :dataSource="data"
              :pagination="false"
              :loading="loading"
            >
            </a-table>
          </div>
        </a-card>
      </a-col>
    </a-row>
  </div>
</template>

<script>
import { mixinDevice } from '@/utils/mixin'

export default {
  name: 'Analysis',
  mixins: [mixinDevice],
  components: {
  },
  data () {
    return {
      formItemLayout: {
        labelCol: { span: 4 },
        wrapperCol: { span: 8 },
      },
      formTailLayout: {
        labelCol: { span: 4 },
        wrapperCol: { span: 8, offset: 4 },
      },
      loading: true,
      user: {},
      mInfo: '',
      data: [],
      data2: [],
      vipcard:[],
      form: this.$form.createForm(this, { name: 'dynamic_rule' }),
      columns: [
        
        {
          title: this.$t('viewsindex.czje'),
          dataIndex: 'money',
          key: 'money',
          scopedSlots: { customRender: 'money' }
        },
        {
          title: this.$t('viewsindex.sj'),
          dataIndex: 'created_at',
          key: 'created_at',
          scopedSlots: { customRender: 'created_at' }
        },
      ],
      columns2: [
        {
          title: this.$t('viewsindex.hyzh'),
          dataIndex: 'username',
          key: 'username',
          scopedSlots: { customRender: 'username' }
        },
        {
          title: this.$t('viewsindex.czje'),
          dataIndex: 'money',
          key: 'money',
          scopedSlots: { customRender: 'money' }
        },
        {
          title: this.$t('viewsindex.sj'),
          dataIndex: 'created_at',
          key: 'created_at',
          scopedSlots: { customRender: 'created_at' }
        },
      ],
      level: '4',
    }
  },
  methods: {
    getUser () {
      this.loading = true
      let url = '/user/info'
      this.$http.get(url).then(res => {
        this.user = res
      }).catch(err => {
        this.$notification.error({
          message: this.$t('viewsindex.sb'),
          description: err.message
        })
      }).then(() => {
        this.loading = false
      })
    },
    getData () {
      this.loading = true
      let url = '/user/recharge_list?limit=10'
      this.$http.get(url).then(res => {
        this.data = res
      }).catch(err => {
        this.$notification.error({
          message: this.$t('viewsindex.sb'),
          description: err.message
        })
      }).then(() => {
        this.loading = false
      })
    },
    getVipData () {
      this.loading = true
      let url = '/user/vip_info?limit=10'
      this.$http.get(url).then(res => {
        this.vipcard = res.data
      }).catch(err => {
        this.$notification.error({
          message: this.$t('viewsindex.sb'),
          description: err.message
        })
      }).then(() => {
        this.loading = false
      })
    },
    getData2 () {
      this.loading = true
      let url = '/user/self_recharge_list?limit=10'
      this.$http.get(url).then(res => {
        this.data2 = res
      }).catch(err => {
        this.$notification.error({
          message: this.$t('viewsindex.sb'),
          description: err.message
        })
      }).then(() => {
        this.loading = false
      })
    },
    onSearch (val) {
      this.mInfo = ''
      this.loading = true
      this.$http.get("/user/m_info?username="+val).then(res => {
        if (res.code == 0) {
          this.mInfo = res.data
        } else {
          this.$message.error(res.msg)
        }
      }).catch(err => {
        this.$notification.error({
          message: this.$t('viewsindex.sb'),
          description: err.message
        })
      }).then(() => {
        this.loading = false
      })
    },
    handleClickSubmit () {
      this.form.validateFields((err, values) => {
        if (!err) {
          this.loading = true
          this.$http.post('/user/m_recharge', this.$qs.stringify({
            username:values.username,
            level:this.level
          })).then(res => {
            if (res.code === 0) {
              this.getUser()
              this.getData()
              this.$notification.success({
                message: this.$t('viewsindex.cg'),
                description: res.msg
              })
            } else {
              this.$notification.error({
                message: this.$t('viewsindex.sb'),
                description: res.msg
              })
            }
          }).catch(err => {
            this.$notification.error({
              message: this.$t('viewsindex.sb'),
              description: err.message
            })
          }).then(()=>{
            this.loading = false
          })
        }
      })
    }
  },
  mounted () {
    this.getUser()
    this.getData()
    this.getData2()
    this.getVipData()
  }
}
</script>

<style lang="less" scoped>
  .extra-wrapper {
    line-height: 55px;
    padding-right: 24px;

    .extra-item {
      display: inline-block;
      margin-right: 24px;

      a {
        margin-left: 24px;
      }
    }
  }

  .antd-pro-pages-dashboard-analysis-twoColLayout {
    position: relative;
    display: flex;
    display: block;
    flex-flow: row wrap;
  }

  .antd-pro-pages-dashboard-analysis-salesCard {
    height: calc(100% - 24px);
    /deep/ .ant-card-head {
      position: relative;
    }
  }

  .dashboard-analysis-iconGroup {
    i {
      margin-left: 16px;
      color: rgba(0,0,0,.45);
      cursor: pointer;
      transition: color .32s;
      color: black;
    }
  }
  .analysis-salesTypeRadio {
    position: absolute;
    right: 54px;
    bottom: 12px;
  }
</style>
